<template>
  <div class="ksong">
    <header>
      <van-nav-bar
        title="K歌"
        left-text="返回"
        right-text="搜索"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </header>
    <section>
      <!-- <button @click="getlogin">登陆</button> -->
      <div class="nav">
        <div class="sing">
          <van-icon name="music" color="red" size="0.9rem" />
          <ul>
            <li>点歌台</li>
            <li>去演唱</li>
          </ul>
        </div>
        <div class="mine">
          <van-icon name="live" color="red" size="0.9rem" />
          <ul>
            <li>我的K歌</li>
            <li>暂无作品</li>
          </ul>
        </div>
      </div>
      <div class="hotSing">
        <div class="zp">
          <div class="zi">
            <p>K歌热门作品榜</p>
            <van-icon name="arrow" size=".3rem" />
          </div>
          <ul>
            <li
              v-for="item in hotList"
              :key="item.data.vid"
              @click="playMv(item.data.vid)"
            >
              <img :src="item.data.coverUrl" alt="" />
              <h4>{{ item.data.title }}</h4>
              <p>{{ item.data.creator.nickname }}</p>
              <div>
                <van-icon name="play-circle-o" /><span>{{
                  item.data.playTime
                }}</span>
              </div>
            </li>
            <!-- <li>
              <img src="" alt="" />
              <h4></h4>
              <p></p>
            </li>
            <li>
              <img src="" alt="" />
              <h4></h4>
              <p></p>
            </li> -->
          </ul>
        </div>
      </div>
      <div class="snav">
        <div class="a1">为你推荐</div>
        <div class="a2">好友作品</div>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="50"
      >
        <div class="send" v-show="allVeo">
          <ul>
            <li v-for="item in allVeo" :key="item.data.vid">
              <div class="message">
                <img :src="item.data.creator.avatarUrl" alt="" />
                <div class="msg">
                  <p>{{ item.data.creator.nickname }}</p>
                  <p>1月5日</p>
                </div>
                <div class="watch">
                  <p>+&nbsp;&nbsp;&nbsp;&nbsp;关注</p>
                </div>
              </div>
              <div class="icon-play" @click="playXq(item.data.vid)">
                <van-icon name="play-circle" />
              </div>
              <div class="talk">
                <p>{{ item.data.title }}</p>
              </div>
              <div class="ds">
                <img :src="item.data.coverUrl" />
              </div>
              <div class="iconLis">
                <div>
                  <van-icon name="share-o" />
                  <p>{{ item.data.shareCount }}</p>
                </div>
                <div>
                  <van-icon name="chat-o" />
                  <p>{{ item.data.commentCount }}</p>
                </div>
                <div>
                  <van-icon name="good-job-o" />
                  <p>{{ item.data.praisedCount }}</p>
                </div>
                <div>
                  <van-icon name="gift-o" />
                  <p>85</p>
                </div>
                <div class="play-count">
                  <van-icon name="play-circle-o" /><span>{{
                    item.data.playTime
                  }}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </van-list>
    </section>
  </div>
</template>

<script>
// import axios from 'axios'
import { reqHotSong, allMv } from '../../api/Ksing'
export default {
  name: 'Ksong',
  components: {},
  data() {
    return {
      loading: false,
      finished: false,
      offset: 1,
      allVeo: [],
      hotList: [],
    }
  },
  computed: {},
  watch: {},

  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      this.$router.push('/search')
    },
    async getHots() {
      const result = await reqHotSong()
      console.log(result.data)
      this.hotList = result.data.datas
      this.hotList.length = this.hotList.length - 5
    },
    playMv(id) {
      console.log(id)
      this.$router.push('/playDetail/' + id)
    },
    async getAllmv() {
      this.loading = true
      const result = await allMv({ offset: this.offset })
      this.loading = false
      console.log(result.data.datas)
      this.allVeo = [...this.allVeo, ...result.data.datas]
      if (result.data.datas < 8) {
        this.finished = true
      } else {
        this.offset++
      }
    },
    onLoad() {
      this.getAllmv()
    },
    playXq(id) {
      this.$router.push('/playDetail/' + id)
    },
  },
  created() {
    this.getHots()
    this.getAllmv()
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
}
</script>

<style scoped>
.play-count {
  position: absolute;
  top: 4.7rem;
  left: 1.2rem;
}
.play-count .van-icon {
  font-size: 0.2rem;
  line-height: 0.25rem;
  color: #fff;
  margin-right: 0.1rem;
}
.play-count span {
  font-size: 0.2rem;
  color: #fff;
}
.icon-play {
  position: absolute;
  bottom: 2.3rem;
  left: 2.1rem;
}
.icon-play .van-icon {
  font-size: 0.7rem;
  color: #fff;
}
.nav {
  width: 100%;
  height: 1.7rem;
  background: #fbf6fb;
  display: flex;
  justify-content: space-around;
}
.nav div {
  width: 42%;
  height: 1.4rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.12rem;
}
.nav div .van-icon {
  margin-left: -0.32rem;
}
.nav ul li:nth-child(1) {
  font-size: 0.28rem;
  color: rgb(90, 89, 89);
  margin-left: 0.15rem;
  margin-bottom: 0.1rem;
}
.nav ul li:nth-child(2) {
  font-size: 0.23rem;
  color: #999;
  margin-left: 0.15rem;
}
.zp {
  margin: 0 auto;
  width: 91%;
  height: 4rem;
  background: #fff;
  border-radius: 0.12rem;
  /* border: #999 1px solid; */
  box-shadow: 0px 1px 5px 1px #999;
}
.zp .zi {
  display: flex;
  align-items: center;
}
.zi p {
  color: rgb(90, 89, 89);
  font-size: 0.28rem;
  padding-left: 0.2rem;
  margin-top: 0.3rem;
}
.zi .van-icon {
  margin-top: 0.3rem;
}
.zp ul {
  margin-left: 0.1rem;
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-around;
}
.zp ul li {
  width: 25%;
  position: relative;
  /* background: rgb(233, 141, 141); */
}
.zp ul li img {
  width: 1.5rem;
  height: 1.5rem;
  /* border: 1px solid #000; */
  object-fit: cover;
  border-radius: 13%;
}
.zp ul li h4 {
  margin-top: 0.13rem;
  font-size: 0.26rem;
  font-weight: normal;
  white-space: nowrap; /*一行显示*/
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /*用...代替超出部分*/
}
.zp ul li p {
  margin-top: 0.1rem;
  font-size: 0.2rem;
  color: #999;
  margin-top: 0.2rem;
}
.zp ul li div {
  color: #fff;
  font-size: 0.15rem;
  position: absolute;
  top: 0;
  right: 0.2rem;
}
.zp ul li div span {
  font-size: 0.15rem;
}
.snav {
  width: 100%;
  height: 1rem;
  display: flex;
}
.snav div {
  font-size: 0.3rem;
  line-height: 1rem;
  color: #999;
}
.snav .a1 {
  font-size: 0.28rem;
  width: 50%;
  margin-left: 2.2rem;
  color: #4c4b4b;
}
.snav .a2 {
  font-size: 0.28rem;
  width: 50%;
  margin-left: -1.3rem;
}
section {
  margin-bottom: 1rem;
}
.send ul {
  margin-left: 0.34rem;
}
.send ul li {
  height: 6.5rem;
  width: 95%;
  /* border: 1px solid #000; */
  margin-bottom: 0.07rem;
  background: #fcfcfc;
  position: relative;
}
.message {
  width: 100%;
  height: 1.3rem;
  /* border: springgreen 1px solid; */
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
}
.message img {
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  /* border: steelblue 1px solid; */
}
.message .msg p {
  font-size: 0.3rem;
  margin-left: 0.1rem;
}
.msg p:nth-child(1) {
  width: 3rem;
  font-size: 0.26rem;
}
.msg p:nth-child(2) {
  font-size: 0.27rem;
  color: #999;
  margin-top: 0.25rem;
}
.watch {
  width: 1.1rem;
  height: 0.4rem;
  border: 1px solid salmon;
  border-radius: 20px 20px 20px 20px;
  margin-left: 1rem;
}
.watch p {
  font-size: 0.25rem;
  text-align: center;
  line-height: 0.45rem;
  color: salmon;
}

.ds img {
  width: 3rem;
  height: 3rem;
  /* border: sandybrown 1px solid; */
  border-radius: 0.25rem;
  margin-left: 1rem;
  object-fit: cover;
}
.iconLis {
  display: flex;
  margin-left: 1rem;
  margin-top: 0.25rem;
}
.iconLis div {
  width: 0.8rem;
  font-size: 0.33rem;
  margin-right: 0.6rem;
  color: #999;
  display: flex;
}
.iconLis div p {
  font-size: 0.2rem;
  margin-top: 0.08rem;
  margin-left: 0.1rem;
}
.talk p {
  line-height: 0.4rem;
  height: 0.7rem;
  width: 4rem;
  font-size: 0.27rem;
  color: #686666;
  margin-left: 1rem;
  margin-bottom: 0.1rem;
}
</style>
